<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css"
			href="../easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="../easyui/themes/icon.css">
		<link href="../css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../easyui/jquery.min.js"></script>
		<script type="text/javascript"
			src="../easyui/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript">
	$(function() {
		var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
		pager.pagination( {
			buttons : [ {
				iconCls : 'icon-search',
				handler : function() {
					alert('search');
				}
			}, {
				iconCls : 'icon-add',
				handler : function() {
					alert('add');
				}
			}, {
				iconCls : 'icon-edit',
				handler : function() {
					alert('edit');
				}
			} ]
		});
	})
</script>
		<script>
		var url;
		function doSearch(){
			$('#dg').datagrid('load',{
				itemid: $('#itemid').val(), 
			});
			}
		function deleteUser(){
			var row=$('#dg').datagrid('getSelected');
			if(row){
				$.messager.confirm("系统提示","您确定要删除这条记录吗?",function(r){
					if(r){
						$.post('<%=basePath%>user/delete.do',{"id":row.userid},
						function(result) {
						var result = eval('(' + result + ')');
					if (result.errorMsg)
					 {
				 	    $.messager.alert("系统提示", "删除成功");
						$("#dg").datagrid("reload");
					} 
					else
					 {
						$.messager.alert("系统提示", result.errorMsg);
						return;
					}
					});
						}
				});
			}
		}
		
		function newUser(){
			$("#dlg").dialog('open').dialog('setTitle','添加用户');
			$('#fm').form('clear');
			url='<%=basePath%>user/save.do';
	}

	function editUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$("#dlg").dialog('open').dialog('setTitle', '编辑用户');
			$('#fm').form('load', row);
			url = '<%=basePath%>user/edit.do';
		}
	}

	function saveUser() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {

				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.errorMsg) {
			 	    $.messager.alert("系统提示", "保存成功");
					$('#dlg').dialog('close');
					$("#dg").datagrid("reload");
					
				} else {
					$.messager.alert("系统提示", result.errorMsg);
					return;
				}
			}
		});
	}
</script>
	</head>
	<body>
		<div class="place">
			<span>位置：</span>
			<ul class="placeul">
				<li>
					<a href="user.jsp">用户管理</a>
				</li>
			</ul>
		</div>

		<div style="margin: 20px 0;"></div>
		<table id="dg" title="用户管理" toolbar="#toolbar"
			;
			style="height: 450px"
			data-options="rownumbers:true,singleSelect:true,pagination:true,url:'<%=basePath%>/user/list.do',method:'post'">
			<thead>
				<tr>
					<th data-options="field:'userid',width:200" hidden="true">

						用户编号
					</th>
					<th data-options="field:'account',width:200">
						账户
					</th>
					<th data-options="field:'name',width:200">
						姓名
					</th>

					<th data-options="field:'password',width:200">
						密码
					</th>
					<th data-options="field:'image',width:200">
						头像
					</th>
				</tr>
			</thead>
		</table>

		<div id="toolbar">

			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-add" plain="true" onclick=newUser();>添加用户</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-edit" plain="true" onclick=editUser();>编辑用户</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true" onclick=deleteUser();>删除用户</a>
			<div id="tb" style="padding: 3px">
				<span>账号:</span>
				<input id="itemid" style="line-height: 26px; border: 1px solid #ccc">
				<a class="easyui-linkbutton" plain="true" 
					onclick="doSearch()">查询</a>
			</div>
		</div>

		<div id="dlg" class="easyui-dialog"
			style="width: 300px; height: 250px; padding: 10px 20px" closed="true"
			buttons="#dlg-buttons">
			<form id="fm" method="post">
				<table cellspacing="10px;">
					<tr>
						<td>
							账户：
						</td>
						<td>
							<input name="account" class="easyui-validatebox"
								style="width: 200px; height: 20px; background-color: gray;">
						</td>
					</tr>
					<br/>
					<tr>
						<td>
							姓名：
						</td>
						<td>
							<input name="name" class="easyui-validatebox"
								style="width: 200px; height: 20px;">
						</td>
					</tr>
					<br/>
					<tr>
						<td>
							密码：
						</td>
						<td>
							<input name="password" class="easyui-validatebox"
								style="width: 200px; height: 20px; background-color: gray;">
						</td>
					</tr>
					<br/>
					<tr>
						<td>
							图像：
						</td>
						<td>
							<input name="image" class="easyui-validatebox"
								style="width: 200px; height: 20px;">
						</td>
					</tr>
					<input type="hidden" name="userid" />
				</table>
			</form>
		</div>

		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok" onclick=saveUser();>保存</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel" onclick=javascript:$('#dlg').dialog('close');
>关闭</a>
		</div>
	</body>
</html>